import React, { Component } from 'react';
import './AllOrder.scss'
import { Calendar, Picker, Icon } from 'antd-mobile';
import {formatDate} from '@/assets/js/methods'
const now = new Date();
class AllOrder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: 0,
      list: ['日报', '周报', '月报'],
      show: false,
      config: {
        type: 'one',
        startTime: ''
      },
    }
  }
  onSelectHasDisableDate = (dates) => {
    console.warn('onSelectHasDisableDate', dates);
  }

  onConfirm = (startTime) => {
    console.log(startTime.getTime())
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime: formatDate(startTime.getTime())
    });
  }

  onCancel = () => {
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false
    });
  }
  pickerChange(value) {
    if (value[0] === '1') {
      this.props.history.push({
        pathname: '/allorder'
      })
    } else if (value[0] === '3') {
      this.props.history.push({
        pathname: '/repairorder'
      })
    }
  }
  componentDidMount() {
    document.getElementsByTagName('title')[0].innerHTML = '全部订单';
    this.setState({
      startTime: formatDate(new Date().getTime())
    })
  }
  render() {
    const district = [
			{
				label: '全部订单',
				value: '1',
			},
			{
				label: '安装订单',
				value: '2',
      },
      {
				label: '维护订单',
				value: '3',
			}
		]
    let height = window.screen.height
    return (
      <div className="AllOrder" style={{minHeight: height + 'px'}}>
        <div className="topbar flex space-around">
          {this.state.list.map((item, index) => {
            return (
              <div className={this.state.active === index ? 'item active' : 'item'} onClick={() => {this.setState({active: index})}} key={index}>{item}</div>
            )
          })}
        </div>

        <div className="choose-group flex y-center">
          <div className="type">类型：</div>
          <div className="flex y-center order-choose">
            <span>
            
              <Picker data={district}
                      cols={1}
                      className="forss"
                      onChange={this.pickerChange.bind(this)}>
                <span>安装订单</span>
              </Picker></span>
            <img src={require('../../images/drawdown.png')} alt=""/>
          </div>
          <div className="flex y-center calendar">
            <span>{this.state.startTime}</span>
            <img src={require('../../images/calendar2.png')} 
                 alt="" 
                 onClick={() => {
                  document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
                  this.setState({
                    show: true
                  });
                }}/>
          </div>
        </div>
        <div className="money-group">
          <div className="top-money flex space-between y-center">
            <span>未分配订单</span>
            <span>￥2800.00</span>
          </div>

          <div className="money-item flex space-between y-center">
            <span>总安装订单</span>
            <span>43</span>
          </div>

          <div className="money-item flex space-between y-center">
            <span>已安排</span>
            <span>12</span>
          </div>

          <div className="money-item flex space-between y-center">
            <span>完成订单</span>
            <span>0</span>
          </div>

          <div className="money-item flex space-between y-center">
            <span className="red">临时订单</span>
            <span className="red">3</span>
          </div>
        </div>

        <div className="order-detail">
          <div className="title flex y-center space-between">
						<span className="text">最近订单</span>
						<div className="more flex y-center">
							<span>更多</span>
							<Icon type="right" size="xs" />
						</div>
          </div>
          <div className="table">
            <div className="th flex y-center">
              <div className="td indexs">订单编号</div>
              <div className="td time">时间</div>
              <div className="td account">账户</div>
              <div className="td jine">状态</div>
            </div>
            <div className="tr flex y-center">
              <div className="td indexs">1216545</div>
              <div className="td time">2018-05-31</div>
              <div className="td account">177****4071</div>
              <div className="td jine green">已完成</div>
            </div>
            <div className="tr flex y-center">
              <div className="td indexs">1216545</div>
              <div className="td time">2018-05-31</div>
              <div className="td account">177****4071</div>
              <div className="td jine red">待分配</div>
            </div>
            <div className="tr flex y-center">
              <div className="td indexs">1216545</div>
              <div className="td time">2018-05-31</div>
              <div className="td account">177****4071</div>
              <div className="td jine red">待分配</div>
            </div>
          </div>
        </div>
        <Calendar
          {...this.state.config}
          visible={this.state.show}
          onCancel={this.onCancel}
          onConfirm={this.onConfirm}
          onSelectHasDisableDate={this.onSelectHasDisableDate}
          getDateExtra={this.getDateExtra}
          defaultDate={now}
          minDate={new Date(+now - 5184000000)}
          maxDate={new Date(+now + 31536000000)}
        />
      </div>
    );
  }
}

export default AllOrder;
